<template>
	<!-- 订单数据 -->
	<view v-if="showFlag">
		<uni-section class="mb-10" title="商户:" type="line">
			<view style="margin-left: 50rpx;height: 50rpx;font-size: 40rpx;">{{this.orderListF[0].nickname}}</view>
		</uni-section>
		<uni-section title="工厂" subTitle="请输入外加工或本厂,默认带入模板中数据" type="line" padding>
			<uni-easyinput v-model="djg" placeholder="不可为空" @input="input"></uni-easyinput>
		</uni-section>
		<uni-section class="mb-10" title="请输入件数" type="line"></uni-section>
		<uni-section :title="item.ddkh+'款'" v-for="(item, index) in orderListF">
			<template v-slot:right>
				<uni-number-box :max="9999" @focus="openZZ" @blur="closeZZ" v-model="orderListF[index].value" background="#e08020" color="#fff" />
			</template>
		</uni-section>
		<button @click="madeTradeTable()" style='background-color: #e08020;'>确认件数</button>
	</view>
	<!-- 交易数据 -->
	<view class="uni-container">
		<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
			<!-- 表头 -->
			<uni-tr>
				<uni-th width="100rpx" align="center">序号</uni-th>
				<uni-th width="330rpx" align="center">品名</uni-th>
				<uni-th width="150rpx" align="center">数量</uni-th>
				<uni-th width="170rpx" align="center">操作</uni-th>
			</uni-tr>
			<!-- 表单数据 -->
			<uni-tr v-for="(item, index) in tradeList" :key="index">
				<uni-td align="center">{{index+1}}</uni-td>
				<uni-td align="center">{{ item.name }}</uni-td>
				<uni-td align="center"><input v-model='tradeList[index].resSpNum' /></uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" size="mini" type="warn" @click='delTrade(index)'>删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
	<button style='background-color: #e08020;' @click='submitTable()'>生成订单</button>
	<!-- 遮罩 -->
	<view v-if="openZZFlag" class="zz"></view>
</template>

<script>
	import config from "../../../utils/config.js"
	export default {
		onLoad: function(option) {
			this.orderListF = JSON.parse(option.orderList)
			this.djg = this.orderListF[0]['djg']
			this.showFlag = true
		},
		data() {
			return {
				orderA: [],
				orderListF: [],
				showFlag: false,
				djg: '',
				tradeList: [],
				openZZFlag: false,
			}
		},
		methods: {
			// 打开遮罩
			openZZ(){
				this.openZZFlag = true
			},
			// 关闭遮罩
			closeZZ(){
				this.openZZFlag = false
			},
			// 制作表格
			madeTradeTable() {
				let that = this
				this.request({
					url: config.baseUrl + "/wx/madeTradeByOrderList",
					data: {
						orderList: JSON.stringify(that.orderListF)
					}
				}).then(res => {
					that.tradeList = res.data
				})
			},
			// 删除数据
			delTrade(index) {
				this.tradeList.splice(index, 1)
			},
			submitTable() {
				// 启动遮罩
				this.openZZ()
				// 校验数据是否合法
				let flag = 1
				// 将交易数据与订单数据绑定
				for (let i=0;i<this.orderListF.length;i++){
					this.orderListF[i]['tradeList'] = []
					this.orderListF[i]['djg'] = this.djg

				}
				this.orderA = this.orderListF
				if (this.tradeList.length === 0){
					flag = 0
				}
				for (let i = 0; i < this.tradeList.length; i++) {
					let index = this.tradeList[i]['orderId']
					this.orderA[index]['tradeList'].push(this.tradeList[i])
					if (this.tradeList[i]['resSpNum'] === 0 || this.tradeList[i]['resSpNum'] === '' || this.tradeList[i]['resSpNum'] === '0'){
						flag = 0
						break
					}
				}
				if (flag === 1){
					// 发送至服务器
					let that = this
					this.request({
						url: config.baseUrl + "/wx/addOrderAndTrade",
						data: {
							orderList: JSON.stringify(this.orderA)
						},
						method: "POST",
					}).then(res => {
						this.closeZZ()
						this.orderA = []
						uni.navigateBack()
					})
				}else{
					this.closeZZ()
					uni.showToast({
						title: '存在为0数据,请删除',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})  
				}


			}

		}


	}
</script>

<style>
	
	page{
		background-color:#eee;
	}
	.zz{
		 z-index: 9999;
		 background-color: black;
		 opacity: 60%;
		 width: 100vw;
		 height: 100vh;
		 position: absolute;
		 top: 0;
		 left:0;
	}
</style>